<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-button type="primary" @click="AddClick()">添加</el-button>
				<el-input type="input" autosize placeholder="请输入商品名称" v-model="fy.storeName"
					@keyup.enter.native="SearchData" style="width: 300px;margin-left: 20px;">
				</el-input>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
			</div>
			<el-table :data="ShopList" border :header-cell-style="{textAlign: 'center'}"
				:row-class-name="tableRowClassName">
				<el-table-column prop="id" label="ID" width="80px" />
				<el-table-column prop="storeName" label="商品名称" />
				<el-table-column prop="image" label="商品图片" width="150px">
					<template slot-scope="scope">
						<el-image :src="ipconfig.image + scope.row.image" :preview-src-list="ShopImageList">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="storeInfo" label="商品简介" width="150px" />
				<el-table-column prop="otPrice" label="零售价" />
				<el-table-column prop="vipPrice" label="会员价" />
				<el-table-column prop="stock" label="是否推荐">
					<template slot-scope="props">
						<span v-if="props.row.stock == 0">否</span>
						<span v-if="props.row.stock == 1">是</span>
					</template>
				</el-table-column>
				<el-table-column prop="giveIntegral" label="积分" />
				<el-table-column prop="isShow" label="商品状态">
					<template slot-scope="scope">
						<span v-if="scope.row.isShow == 0">已上架</span>
						<span v-if="scope.row.isShow == 1">已下架</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220px">
					<template slot-scope="scope">
						<div class="button">
							<el-button size="mini" type="primary" @click="UpdateClick(scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="DelClick(scope.row)">删除</el-button>
							<el-button size="mini" type="success" v-if="scope.row.isShow == 1"
								@click="PutaWay(scope.row)">上架</el-button>
							<el-button size="mini" type="warning" v-if="scope.row.isShow == 0"
								@click="PutaWay(scope.row)">下架</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
				<el-form label-position="left" label-width="80px" :model="ObjectList">
					<el-form-item label="商品图片">
						<el-upload class="avatar-uploader" action="" :http-request="handleUoload"
							:show-file-list="false" :before-upload="beforeAvatarUpload">
							<img v-if="image" :src="ipconfig.image + image" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="轮播图">
						<el-upload class="el-upload-list" action="" :file-list="sliderImage" :limit="5"
							list-type="picture-card" :http-request="handleUoloadSlider"
							:before-upload="beforeAvatarUpload">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file" slot-scope="{ file }">
								<img class="el-upload-list__item-thumbnail" :src="ipconfig.image + file.url" alt="" />
								<span class="el-upload-list__item-actions">
									<span v-if="!disabled" class="el-upload-list__item-delete"
										@click="handleRemove(file)">
										<i class="el-icon-delete"></i>
									</span>
								</span>
							</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="商品详情图片">
						<el-upload class="el-upload-list" action="" :file-list="detailImg" :limit="5"
							list-type="picture-card" :http-request="handleUoloadDetail"
							:before-upload="beforeAvatarUpload">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file" slot-scope="{ file }">
								<img class="el-upload-list__item-thumbnail" :src="ipconfig.image + file.url" alt="" />
								<span class="el-upload-list__item-actions">
									<span v-if="!disabled" class="el-upload-list__item-delete"
										@click="handleRemoveDetailImg(file)">
										<i class="el-icon-delete"></i>
									</span>
								</span>
							</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="分类">
						<el-select v-model="ObjectList.cateId" placeholder="请选择">
							<el-option v-for="item in CateList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品名称">
						<el-input placeholder="请输入商品名称" v-model="ObjectList.storeName"></el-input>
					</el-form-item>
					<el-form-item label="存货编码">
						<el-input placeholder="请输入存货编码" v-model="ObjectList.shopMember"></el-input>
					</el-form-item>
					<el-form-item label="商品简介">
						<el-input placeholder="请输入商品简介" v-model="ObjectList.storeInfo"></el-input>
					</el-form-item>
					<el-form-item label="会员价">
						<el-input placeholder="请输入会员价" v-model="ObjectList.vipPrice"></el-input>
					</el-form-item>
					<el-form-item label="零售价">
						<el-input placeholder="请输入零售价" v-model="ObjectList.otPrice"></el-input>
					</el-form-item>
					<el-form-item label="规格">
						<el-input placeholder="请输入规格" v-model="ObjectList.specType"></el-input>
					</el-form-item>
					<el-form-item label="单位">
						<el-input placeholder="请输入单位" v-model="ObjectList.unitName"></el-input>
					</el-form-item>
					<el-form-item label="积分">
						<el-input placeholder="请输入积分" v-model="ObjectList.giveIntegral"></el-input>
					</el-form-item>
					<el-form-item label="是否推荐" v-if="this.ObjectList.id">
						<el-select v-model="ObjectList.stock" placeholder="请选择">
							<el-option v-for="item in RecomList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="ClickUser()">确 定</el-button>
				</span>
			</el-dialog>

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import * as SearchCateApi from "@/api/PublicSearch";
	import {
		timestampToTime
	} from "@/utils/date";
	import * as ShopApi from "@/api/Search";
	import * as syShopApi from "@/api/Add";
	import ipconfig from "@/utils/ipconfig";
	export default {
		data() {
			return {
				detailImg: [],
				disabled: false,
				sliderImage: [],
				ipconfig: ipconfig,
				total: 0,
				timestampToTime,
				fy: {
					size: 10,
					current: 1,
				},
				ShopList: [],
				ShopImageList: [],
				BannerList: [],
				title: "",
				dialogVisible: false,
				ObjectList: {},
				RecomList: [{
						label: "否",
						value: 0,
					},
					{
						label: "是",
						value: 1,
					},
				],
				BusinessList: [],
				CateList: [{
					cateName: "养生",
					id: "1",
					label: "养生",
					value: "1",
				}, {
					cateName: "生活",
					id: "2",
					label: "生活",
					value: "2",
				}, {
					cateName: "美食",
					id: "3",
					label: "美食",
					value: "3",
				}, {
					cateName: "美容",
					id: "4",
					label: "美容",
					value: "4",
				}, ],
				image: "",
			};
		},
		methods: {
			// 表格隔行变色
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 === 1) {
					return 'success-row' //这是类名
				} else {
					return ''
				}
			},
			getUoload(formData) {
				return new Promise((resolve, reject) => {
					syShopApi.postUpload(formData).then((res) => {
						if (res.code === 200) {
							resolve(res.data);
						}
					});
				});
			},
			// 删除商品详情图片
			handleRemoveDetailImg(file) {
				let index = this.detailImg.findIndex((item) => item.uid === file.uid);
				this.detailImg.splice(index, 1);
			},
			// 商品详情图片
			handleUoloadDetail(file) {
				let formData = new FormData();
				formData.append("file", file.file);
				this.getUoload(formData).then((res) => {
					this.detailImg.push({
						...file.file,
						url: res
					});
				});
			},
			// 删除轮播图片
			handleRemove(file) {
				let index = this.sliderImage.findIndex((item) => item.uid === file.uid);
				this.sliderImage.splice(index, 1);
			},
			// 轮播图片
			handleUoloadSlider(file) {
				let formData = new FormData();
				formData.append("file", file.file);
				this.getUoload(formData).then((res) => {
					this.sliderImage.push({
						...file.file,
						url: res
					});
				});
			},
			// 上传图片
			handleUoload(file) {
				let formData = new FormData();
				formData.append("file", file.file);
				this.getUoload(formData).then((res) => {
					this.image = res;
				});
			},
			beforeAvatarUpload(file) {
				if (file.size > 5242880) {
					this.$message.error("图片大小在5MB以内！");
					return false;
				}
			},
			PutaWay(row) {
				//上下架
				if (row.isShow == 0) {
					row.isShow = 1
				} else {
					row.isShow = 0
				}
				SearchCateApi.updateIsShow({
					id: row.id,
					isShow: row.isShow,
				}).then((res) => {
					this.SearchData();
				});
			},
			UpdateClick(row) {
				syShopApi.UpdateGetInfo({
					id: row.id
				}).then((res) => {
					this.ObjectList = res.data;
					this.image = this.ObjectList.image;
					if (this.ObjectList.sliderImage) {
						this.sliderImage = this.ObjectList.sliderImage
							.split(",")
							.map((item, index) => {
								return {
									url: item,
									uid: Date.now() + index,
								};
							});
					}
					if (this.ObjectList.detailImg) {
						this.detailImg = this.ObjectList.detailImg
							.split(",")
							.map((item, index) => {
								return {
									url: item,
									uid: Date.now() + index,
								};
							});
					}
					this.dialogVisible = true;
				});
				this.title = "修改商品信息";
			},
			DelClick(row) {
				this.$confirm("确认删除？")
					.then((_) => {
						syShopApi.DelShopProduct({
							id: row.id
						}).then((res) => {
							if (res.data == true) {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "删除成功",
									type: "success",
								});
							} else {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "失败",
									message: "删除失败",
									type: "error",
								});
							}
						});
						done();
					})
					.catch((_) => {});
			},
			ClickUser() {
				let sliderImage = this.sliderImage.map((item) => item.url).join(",");
				let detailImg = this.detailImg.map((item) => item.url).join(",");
				if (this.ObjectList.id) {
					syShopApi
						.UpdateShopProduct({
							...this.ObjectList,
							image: this.image,
							sliderImage: sliderImage,
							detailImg: detailImg,
						})
						.then((res) => {
							if (res.data == true) {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "修改成功",
									type: "success",
								});
							} else {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "失败",
									message: "修改失败",
									type: "error",
								});
							}
						});
				} else {
					syShopApi
						.AddShop({
							...this.ObjectList,
							image: this.image,
							sliderImage: sliderImage,
							detailImg: detailImg,
						})
						.then((res) => {
							if (res.data == true) {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "新增成功",
									type: "success",
								});
							} else {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "失败",
									message: "新增失败",
									type: "error",
								});
							}
						});
				}
			},
			AddClick() {
				this.dialogVisible = true;
				this.title = "新增商品信息";
				this.ObjectList = {};
				this.image = "";
				this.detailImg = [];
			},
			SearchData() {
				ShopApi.InsertShop1(this.fy).then((res) => {
					this.total = res.data.total;
					this.ShopList = res.data.records;
					this.ShopList.forEach((item) => {
						this.ShopImageList.push(this.ipconfig.image + item.image);
						this.BannerList.push(item.sliderImage);
					});
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
		},
		created() {
			this.SearchData();
		},
	};
</script>

<style lang="scss" scoped>
	.box-card {
		width: 95%;
		margin: auto;
	}

	.el-table {
		font-size: 10px;
	}

	.el-pagination {
		margin-top: 10px;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 20%;
	}

	// .el-form-item {
	//   width: 300px;
	// }

	::v-deep.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.success-row {
		background-color: #f6f7fb !important;
	}
</style>
